import React from "react";
import MoreInfoBox from "../../../Component/MoreInfoBox";
import './index.css';
import QuestionServer from "../../../Server/Study/QuestionServer";
import MessageUtil from "../../../utils/MessageUtil";

export default class  extends React.Component{
    constructor(props){
        super();
        let chapterList=[];
        let driverList=[];
        this.state={
            chapterList,
            driverList,
            selectedTab:0
        };
        
        // //0驾驶员题库 1口试指南
        QuestionServer.SelectQuestionChapterList(0)
        .then(response=>{
            let sortList=[];
            response.data.forEach(i => {
                //获取详情
                let questions=[];
                QuestionServer.SelectQuestionChapterNumberList(i.id)
                .then(questionResponse=>{
                    questionResponse.data.forEach(item => {
                        questions.push(
                            this.GenQuestion(0,item,i.id)
                        )
                    });

                    let title=i.questionChapterTitle.split('：');
                    let showTitle=<div className="ItemBank_QuestionTitle"><span>{title[0]}</span>
                    <span className="ItemBank_QuestionTitleDesc">{title[1]}</span></div>
                    let chapterInfo=(
                        <div key={i.id} className=" ItemBand_QuestionNode_Cchapter">
                                <MoreInfoBox title={showTitle} desc={
                                    <div className="ItemBand_QuestionNode_Container">
                                        {
                                            questions
                                        }
                                    </div>
                                } />
                        </div>
                    );
                    sortList.push({chapterNumber:i.chapterNumber,chapterInfo});
                    sortList.sort((x,y)=>{
                        return x.chapterNumber>y.chapterNumber?1:-1;
                    })
                    let resultList=[];
                    if(sortList.length!==0){
                        sortList.forEach(element => {
                            resultList.push(element.chapterInfo)
                        });
                    }
                    this.setState({
                        chapterList:resultList
                    },()=>{
                        MessageUtil.ChangeHeight();
                    });
                });
            });
            // MessageUtil.ChangeHeight();
        },reject=>{

        });
        QuestionServer.SelectQuestionChapterList(1)
        .then(response=>{
            let sortList=[];
            response.data.forEach(j => {
                //获取详情
                let questions=[];
                QuestionServer.SelectQuestionChapterNumberList(j.id)
                .then(questionResponse=>{
                    questionResponse.data.forEach(item => {
                        questions.push(
                            this.GenQuestion(1,item,j.id)
                        )
                    });
                    let title=j.questionChapterTitle.split('：');
                    let showTitle=<div className="ItemBank_QuestionTitle"><span>{title[0]}</span>
                    <span className="ItemBank_QuestionTitleDesc">{title[1]}</span></div>
                    let chapterInfo = (
                        <div key={j.id} className=" ItemBand_QuestionNode_Cchapter">
                                <MoreInfoBox title={showTitle} desc={
                                     <div className="ItemBand_QuestionNode_Container">
                                        {
                                            questions
                                        }
                                    </div>
                                    } />
                        </div>
                    )
                    sortList.push({chapterNumber:j.chapterNumber,chapterInfo});
                    sortList.sort((x,y)=>{
                        return x.chapterNumber>y.chapterNumber?1:-1;
                    })
                    let resultList=[];
                    if(sortList.length!==0){
                        sortList.forEach(element => {
                            resultList.push(element.chapterInfo)
                        });
                    }
                    
                    this.setState({
                        driverList:resultList
                    },()=>{
                        MessageUtil.ChangeHeight();
                    })
                });
            });
            // MessageUtil.ChangeHeight();
        },reject=>{

        });
        // MessageUtil.ChangeHeight();
    }
    GenQuestion(type,data,questionID){
        if(type===0){
            return(
                <a key={data.id} href={"/ItemBankDeatil/"+questionID+"/"+data.questionNumber}>
                    <span className="ItemBand_QuestionNode ">{data.questionNumber}</span>
                </a>
            );
        }
        else{
            return(
                <a key={data.id} href={"/itemBankMsgDeatil/"+questionID+"/"+data.questionNumber}>
                    <span className="ItemBand_QuestionNode ">{data.questionNumber}</span>
                </a>
            );
        }
    }
    SelectTab(index){
        this.setState({
            selectedTab:index
        });
    }
    render(){
        return(
            <div className="ItemBank_Container">
                <div>
                    <span className={this.state.selectedTab===0?"ItemBank_Title ItemBank_TitleMarginRight Pointer":"ItemBank_TitleDesc Pointer"} onClick={e=>this.SelectTab(0)}>口试指南</span>
                    <span className={this.state.selectedTab===1?"ItemBank_Title ItemBank_TitleMarginLeft Pointer":"ItemBank_TitleDesc Pointer"} onClick={e=>this.SelectTab(1)}>驾驶员题库</span>
                </div>
                <div style={{display:this.state.selectedTab===0?"none":""}}>
                    {this.state.chapterList}
                </div>
                <div style={{display:this.state.selectedTab===1?"none":""}}>
                    {this.state.driverList}
                </div>
            </div>
            
        )
    }
}